<template>
  <div class="manCloseOrder">
    <div class="dakaInfo" v-if="showDaka">
      <div class="pl10 daka-title">打卡审核</div>
      <div class="daka-pic rowflex">
        <div class="c666 pl10">照片</div>
        <div class="pl10 pic-box">
          <div class="pics rowflex">
            <!--<div v-for="item in orderInfo.repairFileStorePath" class="picItem" v-bind:style="{backgroundImage: 'url(http://'+item.path+')'}"></div>-->
            <img v-for="item in dakaImgs" class="picItem" :src="_getPath(item)"/>
            <!--<img class="picItem" src="~assets/images/icon_xingxing_nol@2x.png"/>-->
          </div>
        </div>
      </div>
      <div class="daka-btn" v-if="!orderInfo.engineerWork.pigeonholedStatus">
        <div class="no-pass" @click="noPassDaka">不通过</div>
        <div class="pass" @click="passDaka">通过</div>
      </div>

      <div class="daka-fruit" v-else>
        <span v-if="orderInfo.engineerWork.pigeonholedStatus == 1" class="red pl10 pb10">审核结果：通过</span>
        <span v-if="orderInfo.engineerWork.pigeonholedStatus == 0" class="red pl10 pb10">审核结果：不通过</span>
      </div>
      <div class="daka-fruit" v-if="showResText">
        <span v-if="dakaRes" class="red pl10 pb10">审核结果：通过</span>
        <span v-else class="red pl10 pb10">审核结果：不通过</span>
      </div>
    </div>
    <div class="order-info">
      <ul class="pl10 pb15">
        <li class="rowflex">
          <div class="info-item c666 ">工单编号</div>
          <div>{{orderInfo.code}}<span class="ml10">{{_dateFormat(orderInfo.createdTime)}}</span>  </div>
        </li>
        <li class="rowflex">
          <div class="info-item c666">联系人</div>
          <div>{{orderInfo.linkMan}}</div>
        </li>
        <li class="rowflex">
          <div class="info-item c666">联系电话</div>
          <div>{{orderInfo.linkPhone}}</div>
        </li>
        <li class="rowflex" v-if="false">
          <div class="info-item c666" >流程模板</div>
          <div>{{orderInfo}}</div>
        </li>
        <li class="rowflex" v-if="orderInfo.county">
          <div class="info-item c666 ">区县</div>
          <div>{{orderInfo.county}}</div>
        </li>
        <li class="rowflex" v-if="orderInfo.customer">
          <div class="info-item c666 " >服务对象</div>
          <div>{{orderInfo.customer.customerName}}</div>
        </li>
        <div class="warrantyStatus" v-if="orderInfo.equipment && orderInfo.equipment.warrantyStatus">
          <span v-if="orderInfo.equipment.warrantyTime">维保到期日期：{{orderInfo.equipment.warrantyTime}}</span>
          <span v-if="orderInfo.equipment.warrantyStatus">维保状态：{{orderInfo.equipment.warrantyStatus}}</span>
        </div>
        <li class="rowflex" v-if="orderInfo.equipment">
          <div class="info-item c666">设备编号</div>
          <div>{{orderInfo.equipment.equipmentNo}}</div>
        </li>
        <li class="rowflex" v-if="picList.length > 0">
          <div class="info-item c666">故障照片</div>
          <div class="pic-box">
            <div class="pics rowflex">
              <!--<div v-for="item in orderInfo.repairFileStorePath" class="picItem" v-bind:style="{backgroundImage: 'url(http://'+item.path+')'}"></div>-->
              <div @click="show(index)" v-for="(item,index) in picList" class="picItem previewer-img" v-bind:style="{backgroundImage: 'url(http://'+item+')', backgroundSize: 'cover' }"></div>
            </div>
          </div>
        </li>
        <li class="rowflex">
          <div class="info-item c666 ">工作内容</div>
          <div class="errorDescription">{{orderInfo.errorDescription}}</div>
        </li>

      </ul>
    </div>

    <section class="toll-box" v-if="orderInfo.systemStatus > 6 && allToll > 0">
      <div class="toll-info">
        <div class="pl10 toll-title">收费项目</div>
        <ul class="pl10 pr10 pb15">
          <li v-for="item in serviceList" class="rowflex">
            <div class="info-item c666">{{item.serviceType}}</div>
            <div class="ml10">{{item.toll}}元</div>
          </li>
        </ul>
        <div class="sum c666 pr10">合计<span class="ml10 red">{{allToll}}</span><span class="c999">元</span></div>
      </div>
    </section>

    <section class="evaluate-box mb20" v-if="orderInfo.evaluate">
      <div class="pl10 evaluate-title">客户评价</div>
      <div class="order-score">
        <p class="c666">客戶对您本次服务的总体评价</p>
        <div class="star-box">
          <div class="star-item" v-bind:class="{light: parseInt(orderInfo.evaluate.level) > 0}"></div>
          <div class="star-item" v-bind:class="{light: parseInt(orderInfo.evaluate.level) > 1}"></div>
          <div class="star-item" v-bind:class="{light: parseInt(orderInfo.evaluate.level) > 2}"></div>
          <div class="star-item" v-bind:class="{light: parseInt(orderInfo.evaluate.level) > 3}"></div>
          <div class="star-item" v-bind:class="{light: parseInt(orderInfo.evaluate.level) > 4}"></div>
        </div>
      </div>
      <section>
        <div class="pl10 evaluate-title">详细评价</div>
        <div class="bottom-content">
          <ul class="appraise-box pl10">
            <li class="apparise-item" v-if="orderInfo.evaluate.useEvaluate">
              <div><span>1</span><span class="item-content">客戶对本公司产品使用的评价</span></div>
              <div class="selects">
                <div class="select-item" v-bind:class="{ typeMark: parseInt(orderInfo.evaluate.useEvaluate) === 4 }">优<div class="mark"></div></div>
                <div class="select-item" v-bind:class="{ typeMark: parseInt(orderInfo.evaluate.useEvaluate) === 3 }">良<div class="mark"></div></div>
                <div class="select-item" v-bind:class="{ typeMark: parseInt(orderInfo.evaluate.useEvaluate) === 2 }">中<div class="mark"></div></div>
                <div class="select-item" v-bind:class="{ typeMark: parseInt(orderInfo.evaluate.useEvaluate) === 1 }">差<div class="mark"></div></div>
              </div>
            </li>
            <li class="apparise-item" v-if="orderInfo.evaluate.mannerEvaluate">
              <div><span>2</span><span class="item-content">客戶对本公司服务人员态度的评价</span></div>
              <div class="selects">
                <div class="select-item" v-bind:class="{ typeMark: parseInt(orderInfo.evaluate.mannerEvaluate) === 4 }">优<div class="mark"></div></div>
                <div class="select-item" v-bind:class="{ typeMark: parseInt(orderInfo.evaluate.mannerEvaluate) === 3 }">良<div class="mark"></div></div>
                <div class="select-item" v-bind:class="{ typeMark: parseInt(orderInfo.evaluate.mannerEvaluate) === 2 }">中<div class="mark"></div></div>
                <div class="select-item" v-bind:class="{ typeMark: parseInt(orderInfo.evaluate.mannerEvaluate) === 1 }">差<div class="mark"></div></div>
              </div>
            </li>
            <li class="apparise-item" v-if="orderInfo.evaluate.skillEvaluate">
              <div><span>3</span><span class="item-content">客戶对本公司服务人员技术的评价</span></div>
              <div class="selects">
                <div class="select-item" v-bind:class="{ typeMark: parseInt(orderInfo.evaluate.skillEvaluate) === 4 }">优<div class="mark"></div></div>
                <div class="select-item" v-bind:class="{ typeMark: parseInt(orderInfo.evaluate.skillEvaluate )=== 3 }">良<div class="mark"></div></div>
                <div class="select-item" v-bind:class="{ typeMark: parseInt(orderInfo.evaluate.skillEvaluate) === 2 }">中<div class="mark"></div></div>
                <div class="select-item" v-bind:class="{ typeMark: parseInt(orderInfo.evaluate.skillEvaluate) === 1 }">差<div class="mark"></div></div>
              </div>
            </li>
            <li class="apparise-item" v-if="orderInfo.evaluate.speedEvaluate">
              <div><span>4</span><span class="item-content">客戶对本公司服务人员速度的评价</span></div>
              <div class="selects">
                <div class="select-item" v-bind:class="{ typeMark: parseInt(orderInfo.evaluate.speedEvaluate) === 4 }">优<div class="mark"></div></div>
                <div class="select-item" v-bind:class="{ typeMark: parseInt(orderInfo.evaluate.speedEvaluate)=== 3 }">良<div class="mark"></div></div>
                <div class="select-item" v-bind:class="{ typeMark: parseInt(orderInfo.evaluate.speedEvaluate) === 2 }">中<div class="mark"></div></div>
                <div class="select-item" v-bind:class="{ typeMark: parseInt(orderInfo.evaluate.speedEvaluate) === 1 }">差<div class="mark"></div></div>
              </div>
            </li>
          </ul>
        </div>
      </section>
      <div v-if="orderInfo.evaluate.option">
        <div class="pl10 suggest-title">意见反馈</div>
        <div class="suggest-content">
          {{orderInfo.evaluate.option}}
        </div>
      </div>
    </section>
    <div v-transfer-dom>
      <previewer :list="bigImgPath" ref="previewer" :options="options"></previewer>
    </div>
    <div class="bottom_bar cfff" @click="finishOrder">关闭工单</div>
  </div>
</template>

<script>
  import {Previewer,TransferDom } from "vux";

  export default {
      name: "ManCloseOrder",
      components: {
        Previewer
      },
      directives: {
        TransferDom
      },
      data() {
        return{
          orderId: '',
          userInfo: {},
          orderInfo: {
            equipment: {},
          },
          startLoc: {},
          arriveLoc: {},
          manLoc: {},
          allToll: 0,
          serviceList: [],
          positionError: true,
          picPathList: [],
          picIdList: [],
          dakaImgs: [],
          showResText: false,
          dakaRes: true,
          showDaka: false,
          picList: [],
          bigImgPath: [],
          //图片预览
          options: {
            getThumbBoundsFn(index) {
              let thumbnail = document.querySelectorAll('.manCloseOrder .previewer-img')[index]
              let pageYScroll = window.pageYOffset || document.documentElement.scrollTop
              let rect = thumbnail.getBoundingClientRect()
              return {x: rect.left, y: rect.top + pageYScroll, w: rect.width}
            }
          },
        }
      },
      methods: {
        //图片预览
        show(index) {
          console.log(index)
          this.$refs.previewer.show(index)
        },
        showBig() {
          this.showBigPicture = !this.showBigPicture;
        },
        noPassDaka: function () {
          this.$http.put('/work/api/workorder/pigeonholedStatus?engineerWorkId='+ this.orderInfo.engineerWork.id+'&pigeonholedStatus=0').then(res=>{
            this.orderInfo.engineerWork.pigeonholedStatus = 0
            document.getElementsByClassName('daka-btn')[0].style.display = 'none'
            this.showResText = true
            this.dakaRes = false
          })
        },
        passDaka: function () {
          this.$http.put('/work/api/workorder/pigeonholedStatus?engineerWorkId='+ this.orderInfo.engineerWork.id+'&pigeonholedStatus=1').then(res=>{
            this.orderInfo.engineerWork.pigeonholedStatus = 1
            document.getElementsByClassName('daka-btn')[0].style.display = 'none'
            this.showResText = true
            this.dakaRes = true
          })
        },
        getServiceList: function () {
          let data={workOrderId: this.orderId, noPage: true, orderNumber: 'asc'}
          this.$http.get('/work/api/serviceitem/', {params: data}).then(res=>{
              for (var i = 0; i < res.data.data.length; i++){ //筛选未确认的服务项目
                if (res.data.data[i].status === 3) {
                  this.serviceList.push(res.data.data[i])
                  this.allToll += res.data.data[i].toll
                }
              }
            }
          )
        },
        finishOrder() {
          this.$http.put('/work/api/workorder/pigeonholed/'+this.orderId).then(res=>{
            this.$router.push({path: '/management/manOrderHome'})
          })
        }
      },
      mounted() {
        let id = this.$route.query.orderId
        console.log(this.$route.query.orderId)
        this.orderId = id
        this.$http.get('/work/api/workorder/'+id).then(res=>{
            console.log(res)
            this.orderInfo = res.data.data
            if (this.orderInfo.engineerWork.arriveFileStore){
              this.showDaka = true
              let key = this.orderInfo.engineerWork.arriveFileStore
              this.$http.get('/work/api/upload/byid?ids='+key).then(res=>{
                let result = res.data.data[key]
                for (var i = 0 ; i < result.length; i++){
                  this.dakaImgs.push(result[i].path)
                }
              })

              ///work/api/engineer/
              // this.$http.get('/work/api/engineer/'+this.orderInfo.engineerWork.id).then(res=>{
              //   this.dakaImgs = res.data.data.arriveFileStorePath
              // })
            }
            if (this.orderInfo.repairFileStore) {
              let key = this.orderInfo.repairFileStore
              this.$http.get('/work/api/upload/byid?ids='+key).then(res=>{
                let result = res.data.data[key]
                for (var i = 0 ; i < result.length; i++){
                  this.picList.push(result[i].path)
                }
                //如果有多张则在预览图中显示
                this.bigImgPath = res.data.data[key].map(item => {
                  return {msrc: this._getPathNo(item.path), src: this._getPathNo(item.path)}
                })
              })
            }
            if(this.orderInfo.systemStatus > 6){
              this.getServiceList()
            }
          }
        )
      }
    }
</script>

<style lang="less">
  .manCloseOrder{
    font-size: 0.13rem;
    padding-bottom: 0.5rem;
    .dakaInfo{
      background-color: #fff;
      margin-bottom: 0.1rem;
      .daka-title{
        font-weight: bold;
        height: 0.4rem;
        line-height: 0.4rem;
        border-bottom: solid 1px #ebebeb;
      }

      .daka-btn{
        display: flex;
        margin-top: 0.2rem;
        margin-left: 0.5rem;
        margin-right: 0.5rem;
        padding-bottom: 0.1rem;
        justify-content: space-between;
        .no-pass{
          width: 0.8rem;
          height: 0.3rem;
          background-color: #fa4a38;
          line-height: 0.3rem;
          text-align: center;
          color: #fff;
          border-radius: 0.04rem;
        }
        .pass{
          width: 0.8rem;
          height: 0.3rem;
          background-color: #42a3fd;
          line-height: 0.3rem;
          text-align: center;
          color: #fff;
          border-radius: 0.04rem;
        }
      }

    }
    .order-info {
      font-size: 0.15rem;
      background-color: #fff;
      padding-top: 0.05rem;
      margin-bottom: 0.1rem;
      border-radius: 0.04rem;
      box-shadow: 0 0.02rem 0.04rem 0 #ebebeb;
      position: relative;
      .errorDescription{
        width: 2.75rem;
      }
    }

    .order-info ul {

    }

    .order-info ul li {
      margin-top: 0.1rem;
      line-height: 0.15rem;
    }
    .warrantyStatus{
      display: flex;
      justify-content: space-between;
      width: 2.75rem;
      margin-left: 0.75rem;
      font-size: 0.13rem;
    }
    .repair-content {
      width: 2.5rem;
      line-height: normal;
      margin-top: -0.03rem;
    }

    .order-info .info-item {
      width: 0.75rem;
    }
    .pic-box {
      width: 2.75rem;
      .pics{
        overflow-x: auto;
        .picItem{
          display: block;
          width: 1.3rem;
          height: 0.85rem;
          margin-right: 0.05rem;
          margin-top: 0.04rem;
        }
      }
    }
    .border {
      width: 78%;
      padding-left: 0.05rem;
      border: solid 0.01rem #ebebeb;
      -webkit-border-radius: 0.04rem;
      -moz-border-radius: 0.04rem;
      border-radius: 0.04rem;
    }
    .toll-box{
      background-color: #fff;
      margin-bottom: 0.1rem;
      .toll-title{
        font-weight: bold;
        height: 0.4rem;
        line-height: 0.4rem;
      }
      .toll-info {
        font-size: 0.15rem;
        /*border-bottom: solid 1px #ebebeb;*/
      }

      .toll-info ul {
        border-bottom: solid 1px #eee;
        border-top: solid 1px #eee;
      }

      .toll-info ul li {
        margin-top: 0.15rem;
        line-height: 0.15rem;
        height: 0.15rem;
        display: flex;
        justify-content: space-between;
      }

      .toll-info .info-item {
      }

      .sum {
        display: flex;
        justify-content: flex-end;
        height: 0.43rem;
        line-height: 0.43rem;
        padding-left: 0.15rem;
      }
    }
    .evaluate-box{
      margin-top: 0.1rem;
      background-color: #fff;
      .evaluate-title{
        font-weight: bold;
        height: 0.4rem;
        line-height: 0.4rem;
        border-bottom: solid 1px #ebebeb;
      }
      .suggest-title{
        font-weight: bold;
        height: 0.4rem;
        line-height: 0.4rem;
        border-bottom: solid 1px #ebebeb;
      }
      .suggest-content{
        padding: 0.1rem;
      }
      .order-score {
        margin-top: 0.13rem;
        padding-left: 0.1rem;
      }
      .star-box {
        display: flex;
        margin-top: 0.1rem;
        padding-bottom: 0.15rem;
      }
      .star-box .star-item {
        width: 0.19rem;
        height: 0.19rem;
        background: url("~assets/images/icon_xingxing_nol@2x.png") no-repeat;
        -webkit-background-size: 100%;
        background-size: 100%;
        margin-right: 0.15rem;
      }
      .star-item:last-child {
        margin-right: 0;
      }
      .star-box .light.star-item {
        background-image: url("~assets/images/icon_xingxing_sel@2x.png") !important;
      }
      .bottom-content {
        font-size: 0.15rem;
      }
      .appraise-box {
        padding-bottom: 0.15rem;
      }
      ul .apparise-item {
        margin-top: 0.15rem;
      }
      .item-content {
        margin-left: 0.15rem;
      }
      .selects {
        display: flex;
        font-size: 0.13rem;
        color: #999;
        margin-top: 0.1rem;
        height: 0.16rem;
        line-height: 0.16rem;
      }
      .select-item {
        display: flex;
        margin-left: 0.3rem;
      }
      .select-item:first-child {
        margin-left: 0.25rem;
      }
      .mark {
        width: 0.16rem;
        height: 0.16rem;
        margin: 0 0 0 0.05rem;
        background: url("~assets/images/icon_nol@2x.png") no-repeat;
        -webkit-background-size: 100%;
        background-size: 100%;
      }
      .typeMark .mark {
        background: url("~assets/images/icon_sel@2x.png") no-repeat;
        -webkit-background-size: 100%;
        background-size: 100%;
      }

      .bottom-suggest {
        height: 0.25rem;
        line-height: 0.25rem;
        font-size: 0.15rem;
        padding: 0 0.1rem;
      }
      .bottom-suggest input {
        width: 2.15rem;
        -webkit-border-radius: 0.02rem;
        -moz-border-radius: 0.02rem;
        border-radius: 0.02rem;
        border: 1px solid #dfdfdf;
      }

    }
    .bottom_bar {
      width: 100%;
      background: #42a3fd;
      line-height: 0.43rem;
      font-size: 0.15rem;
      text-align: center;
    }
  }
</style>
